<template>
  <div>
    <div class="title-style">上传附件</div>
<!--    <h3>上传附件</h3>-->
    <Form :model="formItem" v-if="formItem.jz_mode === '借住房屋'">
      <Row :gutter="24">
        <Col span="8">
          <FormItem>
            <template #label>
<!--              <span style="color: red">*</span>-->
              <span>房产类证明（房产证、居住证明、与房主关系证明等）</span>
            </template>
            <Col span="8">
              <Upload action="" :before-upload="uploadFang">
                <Button :disabled="paramsData.operation === '2'">点击上传</Button>
              </Upload>
            </Col>
            <Col span="4">
              <Button @click="preview(imgList, '房产证')" v-if="imgList.length > 0">点击预览</Button>
            </Col>
          </FormItem>
        </Col>
      </Row>

      <Row :gutter="24">
        <Col span="8">
          <FormItem>
            <template #label>
              <span style="color: red" v-if="lengthType">*</span><span>采暖不报销证明</span>
            </template>
            <Col span="8">
              <Upload action="" :before-upload="uploadHeating">
                <Button :disabled="paramsData.operation === '2'">点击上传</Button>
              </Upload>
            </Col>
            <Col span="4">
              <Button @click="preview(HeatingImgList, '采暖不报销证明')" v-if="HeatingImgList.length > 0">点击预览</Button>
            </Col>
          </FormItem>
        </Col>
      </Row>
    </Form>

    <Form :model="formItem" v-if="formItem.jz_mode === '租赁房屋'">
      <Row :gutter="24">
        <Col span="10">
          <FormItem>
            <template #label>
<!--              <span style="color: red">*</span>-->
              <span>房产类证明（租赁房屋合同、公租房、廉租房准住证明、政府出具的特殊证明等）</span>
            </template>
            <Col span="8">
              <Upload action="" :before-upload="uploadLease">
                <Button :disabled="paramsData.operation === '2'">点击上传</Button>
              </Upload>
            </Col>
            <Col span="4">
              <Button @click="preview(leaseImgList, '房屋租赁合同')" v-if="leaseImgList.length > 0">点击预览</Button>
            </Col>
          </FormItem>
        </Col>
      </Row>

      <Row :gutter="24">
        <Col span="10">
          <FormItem>
            <template #label>
              <span style="color: red" v-if="lengthType">*</span><span>租房未补贴证明</span>
            </template>
            <Col span="8">
              <Upload action="" :before-upload="uploadRenting">
                <Button :disabled="paramsData.operation === '2'">点击上传</Button>
              </Upload>
            </Col>
            <Col span="4">
              <Button @click="preview(rentingImgList, '租房未补贴证明')" v-if="rentingImgList.length > 0">点击预览</Button>
            </Col>
          </FormItem>
        </Col>
      </Row>
    </Form>

<!--    <Form :model="formItem">-->
<!--      <Row :gutter="24" v-if="formItem.jz_mode === '借住房屋'">-->
<!--        <Col span="3">-->
<!--          <span style="color: red">*</span><span>房产证（其他居住证明）：</span>-->
<!--        </Col>-->
<!--        <Col span="2">-->
<!--          <Upload action="" :before-upload="uploadFang">-->
<!--            <Button :disabled="paramsData.operation === '2'">点击上传</Button>-->
<!--          </Upload>-->
<!--        </Col>-->
<!--        <Col span="6">-->
<!--          <FormItem>-->
<!--            <Button @click="preview(imgList, '房产证')" v-if="imgList.length > 0">点击预览</Button>-->
<!--&lt;!&ndash;            <img style="width: 100px; height: 100px; margin:5px 0 0 5px" :src="item" v-for="item in imgList" v-bind:key="item">&ndash;&gt;-->
<!--          </FormItem>-->
<!--        </Col>-->
<!--        <Col span="3">-->
<!--          <span style="color: red" v-if="lengthType">*</span><span>采暖不报销证明：</span>-->
<!--        </Col>-->
<!--        <Col span="2">-->
<!--          <Upload action=""  :before-upload="uploadHeating">-->
<!--            <Button :disabled="paramsData.operation === '2'">点击上传</Button>-->
<!--          </Upload>-->
<!--        </Col>-->
<!--        <Col span="6">-->
<!--          <FormItem>-->
<!--            <Button @click="preview(HeatingImgList, '采暖不报销证明')" v-if="HeatingImgList.length > 0">点击预览</Button>-->
<!--&lt;!&ndash;            <img style="width: 100px; height: 100px; margin:5px 0 0 5px" :src="item" v-for="item in HeatingImgList" v-bind:key="item">&ndash;&gt;-->
<!--          </FormItem>-->
<!--        </Col>-->
<!--      </Row>-->
<!--      <Row :gutter="24" v-if="formItem.jz_mode === '租赁房屋'">-->
<!--        <Col span="3">-->
<!--          <span style="color: red">*</span><span>租赁房屋合同（公租房、廉租房准住证明）：</span>-->
<!--        </Col>-->
<!--        <Col span="2">-->
<!--          <Upload action=""  :before-upload="uploadLease">-->
<!--            <Button :disabled="paramsData.operation === '2'">点击上传</Button>-->
<!--          </Upload>-->
<!--        </Col>-->
<!--        <Col span="6">-->
<!--          <FormItem>-->
<!--            <Button @click="preview(leaseImgList, '房屋租赁合同')" v-if="leaseImgList.length > 0">点击预览</Button>-->
<!--&lt;!&ndash;            <img style="width: 100px; height: 100px; margin:5px 0 0 5px" :src="item" v-for="item in leaseImgList" v-bind:key="item">&ndash;&gt;-->
<!--          </FormItem>-->
<!--        </Col>-->
<!--        <Col span="3">-->
<!--          <span style="color: red">*</span><span>租房未补贴证明：</span>-->
<!--        </Col>-->
<!--        <Col span="2">-->
<!--          <Upload action="" :before-upload="uploadRenting">-->
<!--            <Button :disabled="paramsData.operation === '2'">点击上传</Button>-->
<!--          </Upload>-->
<!--        </Col>-->
<!--        <Col span="6">-->
<!--          <FormItem>-->
<!--            <Button @click="preview(rentingImgList, '租房未补贴证明')" v-if="rentingImgList.length > 0">点击预览</Button>-->
<!--          </FormItem>-->
<!--        </Col>-->
<!--      </Row>-->
<!--    </Form>-->
    <Modal v-model="preShow" :closable="false" :styles="{top: '20px'}" width="532">
      <Carousel v-model="picIndex" style="width:500px" dots="outside" trigger="hover">
        <CarouselItem class="centerimg" v-for="(imginfo, index) in pic_urls" :key="index">
          <img :id="printNum(index)" :src="imginfo" class="pre_img_style"/>
        </CarouselItem>
      </Carousel>
      <div slot="footer" style="text-align: center">
        <div>
          <Button type="error" v-if="paramsData.operation !== '2'" @click="deletePic">删除当前照片</Button>
          <Button @click="preShow=false">关闭</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
// import { createIoToFile } from '@/api/heating'
import { createUpLoadFiles, getSign } from '@/api/common'
import * as imageConversion from 'image-conversion'

export default {
  props: {
    paramsData: Object
  },
  name: 'ConcentratedAppendix',
  data () {
    return {
      formItem: {
        jz_mode: '借住房屋'
      },
      upPicData: {
        fileName: '',
        filePath: 'cnc/itemInfo'
      },
      imgList: [], // 房产证明
      HeatingImgList: [], // 采暖不报销证明
      leaseImgList: [], // 房屋租赁合同
      rentingImgList: [], // 租房未补贴证明
      lengthType: false,
      params: {
        // 房产证: '',
        // 采暖不报销证明: '',
        // 房屋租赁合同: '',
        // 租房未补贴证明: ''
      },
      imgString: '',
      picIndex: 0,
      pic_urls: [],
      preShow: false
    }
  },
  methods: {
    uploadFang (file) { // 上传房产证
      this.createUpload(file, this.imgList, '房产证')
    },
    uploadHeating (file) { // 上传采暖不报销证明
      this.createUpload(file, this.HeatingImgList, '采暖不报销证明')
    },
    uploadLease (file) { // 房屋租赁合同
      this.createUpload(file, this.leaseImgList, '房屋租赁合同')
    },
    uploadRenting (file) { // 租房未补贴证明
      this.createUpload(file, this.rentingImgList, '租房未补贴证明')
    },
    createUpload (file, list, imgString) {
      // let formdata = new FormData()
      // formdata.append('fileName', file.name)
      // formdata.append('file', file)

      if (file.size / 1024 / 1024 > 1) { // 图片大于1M进行压缩处理
        return new Promise(() => {
          imageConversion.compressAccurately(file, 200).then(res => {
            this.upPicData.fileName = file.name + '.' + file.type.substring(6)
            let that = this
            const reader = new FileReader()
            // reader.readAsDataURL(file)
            reader.readAsDataURL(new File([res], '', { type: res.type, lastModified: Date.now() }))
            reader.onload = () => {
              let index = reader.result.indexOf('base64,') + 7
              that.upPicData.file = reader.result.substring(index)
              that.upPic(that.upPicData, list, imgString)
            }
            return false
          })
        })
      } else {
        this.upPicData.fileName = file.name + '.' + file.type.substring(6)
        let that = this
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
          let index = reader.result.indexOf('base64,') + 7
          that.upPicData.file = reader.result.substring(index)
          that.upPic(that.upPicData, list, imgString)
        }
        return false
      }

      // this.upPicData.fileName = file.name + '.' + file.type.substring(6)
      // let that = this
      // const reader = new FileReader()
      // reader.readAsDataURL(file)
      // reader.onload = () => {
      //   let index = reader.result.indexOf('base64,') + 7
      //   that.upPicData.file = reader.result.substring(index)
      //   that.upPic(that.upPicData, list, imgString)
      // }
      // return false
    },
    upPic (obj, list, imgsString) {
      var time = new Date().getTime()
      this.timeStep = time.toString()
      let param = {
        filePath: obj.filePath,
        fileName: obj.fileName,
        timestamp: this.timeStep
      }
      getSign(param).then(res => {
        if (res.data.errcode === 0) {
          createUpLoadFiles(res.data.data.docking_url, { sign: res.data.data.sign, timestamp: this.timeStep, filePath: obj.filePath, fileName: obj.fileName, file: obj.file }).then(res => {
            if (res.data.errcode === 0) {
              let imgurl = res.data.data
              imgurl = imgurl.replace('http://anshandl.qstb.top:8000/', 'http://172.20.10.134:9864/')
              list.push(imgurl)
              console.log(list, 'this.list')
              let imgString = ''
              list.forEach(function (item) {
                if (imgString) {
                  imgString = imgString + ',' + item
                } else {
                  imgString = item
                }
              })
              this.$set(this.params, imgsString, imgString)
            } else {
              this.$Notice.error({ title: '上传失败', desc: '' })
            }
          })
        } else {
          this.$Notice.error({ title: '上传失败', desc: '' })
        }
      })
    },
    printNum (e) {
      this.printIndex = e
      return e
    },
    preview (list, imgString) {
      this.preShow = true
      this.pic_urls = list
      this.imgString = imgString
    },
    deletePic () {
      this.pic_urls.splice(this.picIndex, 1)
      if (this.imgString === '房产证') {
        this.imgList = this.pic_urls
      } else if (this.imgString === '采暖不报销证明') {
        this.HeatingImgList = this.pic_urls
      } else if (this.imgString === '房屋租赁合同') {
        this.leaseImgList = this.pic_urls
      } else if (this.imgString === '租房未补贴证明') {
        this.rentingImgList = this.pic_urls
      }
      if (this.pic_urls.length === 0) {
        this.preShow = false
      }
      let imgString = ''
      this.pic_urls.forEach(function (item) {
        if (imgString) {
          imgString = imgString + ',' + item
        } else {
          imgString = item
        }
      })
      this.$set(this.params, this.imgString, imgString)
    }
  },
  mounted () {
    if (this.paramsData.jz_mode) {
      this.formItem.jz_mode = this.paramsData.jz_mode
    }
    if (this.paramsData.familyLenght === '1') {
      this.lengthType = true
    } else {
      this.lengthType = false
    }
    console.log(this.formItem.jz_mode)
    if (this.paramsData.operation) {
      if (this.paramsData.params) {
        this.params = this.paramsData.params
        if (this.paramsData.params.房产证) {
          this.$nextTick(() => {
            this.imgList = this.paramsData.params.房产证.split(',')
          })
          // this.imgList = this.paramsData.params.房产证.split(',')
        }
        if (this.paramsData.params.采暖不报销证明) {
          this.$nextTick(() => {
            this.HeatingImgList = this.paramsData.params.采暖不报销证明.split(',')
          })
          // this.HeatingImgList = this.paramsData.params.采暖不报销证明.split(',')
        }
        if (this.paramsData.params.房屋租赁合同) {
          this.$nextTick(() => {
            this.leaseImgList = this.paramsData.params.房屋租赁合同.split(',')
          })
          // this.leaseImgList = this.paramsData.params.房屋租赁合同.split(',')
        }
        if (this.paramsData.params.租房未补贴证明) {
          this.$nextTick(() => {
            this.rentingImgList = this.paramsData.params.租房未补贴证明.split(',')
          })
          // this.rentingImgList = this.paramsData.params.租房未补贴证明.split(',')
        }
      }
    }
  }
}
</script>
<style>
.centerimg {
  text-align: center;
}
.pre_img_style {
  height: 500px;
  width: auto;
  max-width: 500px;
}
.title-style {
  padding: 8px 12px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin: 15px 0;
  font-size: 16px;
  width: 100%;
}
.ivu-form-item-label {
  width: 100%;
  /*text-align: left;*/
  /*float: left;*/
}
.ivu-form .ivu-form-item-label {
  text-align: left;
}
</style>
